<template>
  <el-card>
    <div class="header">
      <el-form label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="标签名称">
              <el-input
                placeholder="请输入目录名称"
                size="small"
                style="width: 200px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="状态">
              <el-input
                placeholder="请输入目录名称"
                size="small"
                style="width: 200px"
              />
              <el-button style="margin-left: 20px" size="small">取消</el-button>
              <el-button
                type="primary"
                style="background-color: #409eff; color: #fff"
                size="small"
              >
                确定
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              style="background: #67c23a; color: #fff"
              @click="addShowDia = true"
            >
              新增标签
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 文字提示 -->
    <el-alert
      :title="`${total}条消息`"
      type="info"
      show-icon
      :closable="false"
    />

    <el-table :data="direList">
      <el-table-column label="序号" type="index" />
      <el-table-column label="所属学科" prop="subjectName" />
      <el-table-column label="标签名称" prop="tagName" />
      <el-table-column label="创建者">
        <template #default="{ row }">
          {{ row.creatorID === 2 ? '超级管理员' : '编辑者' }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期" prop="addDate" />
      <el-table-column label="面试题数量" prop="totals" />
      <el-table-column label="状态">
        <template #default="{ row }">
          {{ row.state == 1 ? '已启用' : '已禁用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="handleDisabled(row)">
            {{ row.state == 1 ? '禁用' : '启用' }}
          </el-button>
          <el-button
            type="text"
            :disabled="row.state === 1"
            @click="handleOpenEdit(row.id)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            :disabled="row.state === 1"
            @click="handleDel(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        :current-page="query.page"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增弹窗 -->
    <Dialog :show-dia.sync="addShowDia" />
    <!-- 编辑弹窗 -->
    <Dialog :show-dia.sync="editShowDia" :edit-id="EditId" />
  </el-card>
</template>

<script>
s
import { getTagsListAPI, updateState, delTagAPI } from '@/api/subject'
import Dialog from './components/add-dialog.vue'
export default {
  name: 'DirectoryView',
  components: {
    Dialog
  },
  data() {
    return {
      direList: [],
      total: 0,
      query: {
        page: 1,
        pagesize: 10
      },
      addShowDia: false,
      // 编辑
      editShowDia: false,
      // 要编辑的id
      EditId: 0
    }
  },
  watch: {
    // 监听添加编辑弹层打开状态如果关闭就重请求绘制列表
    addShowDia() {
      if (this.addShowDia === false) {
        this.getDirectoryList()
      }
    },
    // 显示编辑弹层
    editShowDia() {
      if (this.editShowDia === false) {
        this.getDirectoryList()
      }
    }
  },
  created() {
    this.getDirectoryList()
  },
  methods: {
    // 获取标签列表的处理函数
    async getDirectoryList() {
      let res = null
      if (this.$route.query.id) {
        res = await getTagsListAPI({
          ...this.query,
          subjectID: this.$route.query.id
        })
      } else {
        res = await getTagsListAPI({ ...this.query })
      }

      console.log(res)
      this.total = res.data.counts
      this.direList = res.data.items
    },

    // 页码
    handleSizeChange(val) {
      this.query.pagesize = val
      this.getDirectoryList()
    },
    // 页号
    handleCurrentChange(val) {
      this.query.page = val
      this.getDirectoryList()
    },
    // 打开修改
    handleOpenEdit(id) {
      this.editShowDia = true
      this.EditId = id
    },
    // 禁用与启用状态状态
    async handleDisabled(row) {
      if (row.state === 1) {
        // 更改为屏蔽状态
        const res1 = await updateState(row.id, 0)
        console.log('状态' + res1)

        // console.log('现在' + row.id)
      } else {
        // 更改为启用状态
        await updateState(row.id, 1)
      }
      this.getDirectoryList()
    },
    // 删除标签的点击事件
    async handleDel(id) {
      try {
        await this.$confirm('确定要删除嘛', '提示', {
          type: 'warning'
        })
        await delTagAPI(id)
        this.$message.success('删除成功')
        this.getDirectoryList()
      } catch (e) {
        this.$message.error('已取消')
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* .el-card {
  margin: 20px;
} */
</style>
